<template>
  <el-container style="height: 100vh;">
      <el-aside width="200px" style="background-color: #ffffff;">
        <el-menu :default-openeds="['1']" :default-active="activeRoute" :router="true">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航菜单</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item 
              :index="ele.path"
               v-for="(ele) in routes"
               >
               <i :class="ele.meta.icon"></i><span>{{ele.meta.title}}</span></el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>
      
      <el-container>
        <el-header style="text-align: right; font-size: 12px;display:flex;justify-content:flex-end;align-items:center;">
           <img :src="avatar" style="width:40px;height:40px;border:1px solid #000;border-radius:50%;margin-right:20px;" />
          <el-dropdown>
           
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>
        
        <el-main>
          <!-- <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table> -->
         <slot></slot>
        </el-main>
      </el-container>
    </el-container>
</template>

<script>
import {
  mapState,
  mapMutations
} from 'vuex'
import routes from '@/routes/routes.js'
  export default {
    methods: {
      ...mapMutations([
        'changeAvatar'
      ])
    },
    computed: {
      ...mapState([
        'avatar'
      ])
    },
    data() {
      const item = {
        date: '2016-05-02',
           name: '王小虎',
           address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item),
        routes:routes.filter(ele=>{
          if(ele.meta&&ele.meta.isNav===true){
              return ele
          }
        }),
        activeRoute:''
      }
    },
    created() {
      // console.log(this.routes)
      // console.log(this.$route.fullPath)
      // console.log(1111111111111111111111111111111)
      let a=this.$route.fullPath
      let n=0
      this.routes.forEach(ele => {
        if(a.includes(ele.path)){
          this.activeRoute=ele.path
          console.log(this.activeRoute)
          n++
        }
       if(n===0)
       {
         this.activeRoute=''
         console.log(this.activeRoute)
       }
      })
    },
    beforeUpdate() {
       let a=this.$route.fullPath
      let n=0
      this.routes.forEach(ele => {
        if(a.includes(ele.path)){
          this.activeRoute=ele.path
          console.log(this.activeRoute)
          n++
        }
       if(n===0)
       {
         this.activeRoute=''
         console.log(this.activeRoute)
       }
      })
    }
  };
</script>

<style scoped>
  .el-header {
    background-color: pink;
    color: #333;
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  .el-menu-item.is-active{
    background-color: pink;
  }
</style>
